import React, { useState } from 'react';
import styles from './index.less';
import { getToken, removeToken } from '@/utils';
import { history } from 'umi';
import {
  Layout,
  Modal,
  Descriptions,
  Menu,
  Dropdown,
  Popconfirm,
  message,
  Form,
  Input,
} from 'antd';
import { loginOutApi } from '@/api';
const { Header } = Layout;
export default function HeaderBar() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isVisible, setIsVisible] = useState(false);
  const { headPortrait, userName } = getToken('token');

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const memuHanler = async (item) => {
    if (item.key === '1') {
      setIsVisible(true);
    }
  };

  /** 确认框 登出操作 */
  const cancel = () => {
    message.error('已取消');
  };
  const confirm = async () => {
    const { status } = await loginOutApi();
    if (status == 200) {
      history.push('/login');
      message.success('退出成功');
      removeToken();
    } else {
      message.error('退出失败');
    }
  };
  const menu = (
    <Menu
        onClick={memuHanler}
    >
      <Menu.Item key="1">修改密码</Menu.Item>
      <Menu.Divider />
      <Menu.Item key="2">
        <Popconfirm
            cancelText="No"
            okText="Yes"
            onCancel={cancel}
            onConfirm={confirm}
            title="您确定要退出吗?"
        >
          退出登录
        </Popconfirm>
      </Menu.Item>
    </Menu>
  );
  return (
    <div>
      <Header className={styles.header}>
        <div className={styles.header_title}>
          <img alt=""
              onClick={showModal}
              src={headPortrait}
          />
          <Dropdown overlay={menu}>
            <h1
                className="ant-dropdown-link"
                onClick={(e) => e.preventDefault()}
            >
              {userName}
            </h1>
          </Dropdown>
        </div>
        {/** 个人信息的对话框 */}
        <Modal
            cancelText="取消"
            okText="确定"
            onCancel={handleCancel}
            onOk={handleOk}
            style={{ backgroundColor: '#efefef', padding: '5px 5px 0 5px' }}
            title="个人中心"
            visible={isModalVisible}
        >
          <Descriptions column={1}>
            <Descriptions.Item label="头像">
              <img
                  alt=""
                  src={headPortrait}
                  style={{
                  width: 50,
                  height: 50,
                  borderRadius: '50%',
                  verticalAlign: 'bottom',
                }}
              />
              <span style={{ color: '#ccc' }}>点击修改头像</span>
            </Descriptions.Item>
            <Descriptions.Item label="账号">13012345678</Descriptions.Item>
            <Descriptions.Item label="姓名">张三</Descriptions.Item>
            <Descriptions.Item label="手机号">13012345678</Descriptions.Item>
            <Descriptions.Item label="性别">女</Descriptions.Item>
          </Descriptions>
        </Modal>
        {/** 修改密码输入框 */}
        <Modal
            cancelText="取消"
            okText="确定"
            onCancel={() => setIsVisible(false)}
            onOk={() => setIsVisible(false)}
            style={{ backgroundColor: '#efefef', padding: '5px 5px 0 5px' }}
            title="修改密码"
            visible={isVisible}
        >
          <Form
              autoComplete="off"
              initialValues={{ remember: true }}
              labelCol={{ span: 6}}
              name="basic"
              // onFinish={onFinish}
              // onFinishFailed={onFinishFailed}
              wrapperCol={{ span: 18 }}
          >
            <Form.Item
                label="旧密码"
                name="password"
                rules={[
                { required: true, message: '请输入您的旧密码!' },
              ]}
            >
              <Input placeholder="请输入"
                  type="password"
              />
            </Form.Item>

            <Form.Item
                label="新密码"
                name="newPwd"
                rules={[
                { required: true, message: '请输入您的新密码!' },
              ]}
            >
              <Input placeholder="请输入"
                  type="password"
              />
            </Form.Item>

            <Form.Item
                label="确定密码"
                name="rePwd"
                rules={[
                { required: true, message: '请确认您的新密码!' },
              ]}
            >
              <Input placeholder="请输入"
                  type="password"
              />
            </Form.Item>

          </Form>
        </Modal>
      </Header>
    </div>
  );
}
